<template>
    <div class="blog-detail">
        <div class="mblog">
            <div class="home-title">
                <h2>{{ blog.title }}</h2>
                <span style="font-size: small;color: blue">创建时间：{{ blog.createTime.split(' ')[0] }}  </span>
                <!--<span style="font-size: small;color: blue">更新时间：{{ blog.updateTime.split(' ')[0] }}  </span>-->
                <span style="font-size: small;color: blue">分类：{{ blog.typeName }}</span>
                <br>
                <span style="font-size: small;color: #ff20fa">下载地址：见详情介绍</span>
                <br>
                <span style="font-size: small;color: blue">提取密码：{{ blog.secret }}</span>
                <a v-if="!blog.havSub" class="color-btn" href="javascript:;"
                   @click.prevent="submitSubscribe(blog.id)">订阅+</a>
                <!--
                                <span style="font-size: small;color: blue"> 字数：{{ blog.words }}</span>
                -->
            </div>
            <!-- <el-link v-if="ownBlog" icon="el-icon-edit">
                 <router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">
                     编辑
                 </router-link>
             </el-link>
 -->
            <!--      <div class="markdown-body" v-html="blog.content" v-viewer="{movable: false}"></div>-->
            <markdown-it-vue-light class="md-body" :content="blog.content" v-viewer="{movable: false}"/>

        </div>

        <!--版权信息-->
        <div class="author-message">

            <ul class="list">
                <li>作者：coder-msc（微信右下角）
<!--
                    <router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link>
-->
                </li>
                <li>发表时间：{{ blog.createTime }}</li>
                <li>最后修改：{{ blog.updateTime }}</li>
              <!--  <li>本站点采用<a href="https://creativecommons.org/licenses/by/4.0/" style="text-decoration-line: none;"
                            target="_blank"> 署名 4.0 国际 (CC BY 4.0) </a>创作共享协议。资源来源网络，仅供交流学习使用，侵权请联系删除
                </li>-->
                <li>本站所有资源均来源于网络，仅供学习参考，如有侵权，非常抱歉，请立即（微信右下角）
                    <!--<router-link style="text-decoration-line: none;" to="/about">（联系作者）</router-link> -->联系作者删除！
                </li>
            </ul>
        </div>
        <div>
            <Comment></Comment>

        </div>

    </div>
</template>

<script>
    export default {
        name: "GoodsDetail",
        components: {Comment},
        data() {
            return {
                types: [],
                blog: {
                    id: "",
                    title: "",
                    content: "",
                    createTime: "",
                    updateTime: "",
                    typeName: "",
                    words: 0,
                    views: 0,
                    havSub: false,
                    secret: '',

                },
                ruleForm: {
                    id: "",
                },
                ownBlog: false
            }
        },
        methods: {
            //提交订阅
            submitSubscribe(goodsId) {
                this.ruleForm.id = goodsId;
                this.$axios.post('/sub/buy/subscribe', this.ruleForm).then(res => {
                    console.log("提交订阅提交订阅" + res.data.data)
                    if (res.data.data) {
                        this.$alert('订阅成功了', '感谢订阅', {
                            confirmButtonText: '确认',

                        });
                        this.getGoodsDetailById()
                    } else {
                        this.$alert('CC不足，请联系QQ：59968873', '提示', {
                            confirmButtonText: '确认',
                        });
                    }

                })
            },

            getTypes() {
                const _this = this
                this.$axios.get('/types?typeForm=2').then(res => {
                    _this.types = res.data.data

                })
                //console.log(this.types)

            },
            getGoodsDetailById() {
                const id = this.$route.params.goodsId
                const _this = this
                this.$axios.get('/sub/subscribe/detail/' + id).then(res => {
                    const blog = res.data.data
                    _this.blog.id = blog.id
                    _this.blog.title = blog.title
                    _this.blog.createTime = blog.createTime
                    _this.blog.updateTime = blog.updateTime
                    _this.blog.views = blog.views
                    _this.blog.words = blog.words
                    _this.blog.havSub = blog.havSub
                    _this.blog.secret = blog.secret

                    //maekdown-it 渲染器 开启代码高亮 需要使用Highlight.js 的 CSS


                    _this.blog.content = blog.content
                    if (_this.$store.getters.getUser) {
                        _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
                    } else {
                        _this.ownBlog = false
                    }


                    for (var i in _this.types) {
                        if (blog.typeId == _this.types[i].id) {
                            _this.blog.typeName = _this.types[i].typeName
                        }
                    }

                })
            },
            getBlog() {
                const blogId = this.$route.params.blogId

                const _this = this
                this.$axios.get('/goods/' + blogId).then(res => {
                    const blog = res.data.data
                    _this.blog.id = blog.id
                    _this.blog.title = blog.title
                    _this.blog.createTime = blog.createTime
                    _this.blog.updateTime = blog.updateTime
                    _this.blog.views = blog.views
                    _this.blog.words = blog.words

                    //maekdown-it 渲染器 开启代码高亮 需要使用Highlight.js 的 CSS


                    _this.blog.content = blog.content
                    if (_this.$store.getters.getUser) {
                        _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)
                    } else {
                        _this.ownBlog = false
                    }


                    for (var i in _this.types) {
                        if (blog.typeId == _this.types[i].id) {
                            _this.blog.typeName = _this.types[i].typeName
                        }
                    }

                })
            }
        },
        created() {
            this.getTypes()
            this.getGoodsDetailById()

        }
    }
</script>


<style scoped>
    .mblog {
        min-height: 600px;


        padding: 5px 35px 5px 35px;
        text-align: center;
    }

    .home-title {
        margin-bottom: 40px;
    }

    .md-body {
        text-align: left;
    }

    .blog-detail {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
    }

    .author-message {
        text-align: left;
        background-color: honeydew;
        padding: 10px 5px 10px 5px;
        font-size: 14px;

    }

    .el-divider {
        margin: 1rem 0 !important;
    }

    .code {
        background-color: #333333;
    }

    /*订阅按钮样式*/
    .div-btn {
        padding: 14px 5px 30px 5px;
        margin-top: 7px;
    }

    /*订阅按钮样式*/
    .color-btn {
        text-decoration-line: none;
        padding: 12px 25px;
        color: white;
        font-size: 13px;
        background: linear-gradient(to left, #37362c, #303133);
        border-radius: 15px;
        min-width: 90px;
        margin-left: 126px;
        position: relative;
        height: 200px;
        width: 200px;
    }
</style>